<template>
  <div class="chat_bg" v-if="!loading">
    <el-container height="620px">
      <el-aside height="620px" width="300px" class="el_aside">
        <ul class="left" v-if="tableData.length > 0">
          <li @click="checked(item)" v-for="(item, index) in tableData" :key="index" :class="user_id == item.user_id ? 'left_item_active d-s-s' : 'left_item d-s-s'">
            <div><img class="left_item_img" v-img-url="item.user ? item.user.avatarUrl : avatarUrl" alt="" /></div>
            <div class="flex-1">
              <div class="left_item_name">{{ item.user ? item.user.nickName : '未知用户' }}</div>
              <div class="left_item_content" v-if="item.newMessage != null && item.newMessage.type == 0">{{ item.newMessage.content }}</div>
              <div class="left_item_content" v-if="item.newMessage != null && item.newMessage.type == 1">[图片]</div>
              <div class="left_item_content" v-if="item.newMessage != null && item.newMessage.type == 2">[商品]</div>
            </div>
            <div v-if="item.newMessage != null">{{ DateToHM(item.newMessage.create_time) }}</div>
            <div><span class="close_chat icon iconfont icon-shanchu" @click="closeChat(index)"></span></div>
          </li>
        </ul>
        <ul v-else>
          <div class="notable">当前尚未建立连接</div>
        </ul>
      </el-aside>
      <el-container>
        <div v-if="!is_open_socket" class="red danger_tip">当前未连接到服务器，请检查网络或者联系平台是否已开启在线客服</div>
        <el-main class="right">
          <el-header class="chat_header">
            <div class="content_title">{{ conversation }}</div>
          </el-header>
          <el-main>
            <ul class="infinite-list" style="overflow:auto" ref="container">
              <li v-for="(item, index) in content_list" :key="index" v-if="content_list != ''">
                <div :class="item.msg_type == 1 ? 'im_text' : 'im_text2'" class="m-item">
                  <img class="avatar" v-if="item.msg_type == 2" v-img-url="item.user ? item.user.avatarUrl : avatarUrl" />
                  <img class="avatar" v-if="item.msg_type == 1" v-img-url="item.supplier && item.supplier.logo ? item.supplier.logo.file_path : avatarUrl" />
                  <div>
                    <div class="my_date">{{ item.create_time }}</div>
                    <div v-if="item.type == 0" :class="item.msg_type == 1 ? 'my_content' : 'you_content'">
                      <div>{{ item.content }}</div>
                    </div>
                    <div v-if="item.type == 1" :class="item.msg_type == 1 ? 'my_content' : 'you_content'">
                      <img @click="clickImg(item.content)" class="cont_img" v-img-url="item.content" />
                    </div>
                    <div v-if="item.type == 2" :class="item.msg_type == 1 ? 'my_content' : 'you_content'">
                      <div class="product_txtitem">
                        <div><img class="pro_img" v-img-url="JSON.parse(item.content).product_img" /></div>
                        <div>
                          <div class="pro_txtname">{{ JSON.parse(item.content).product_name }}</div>
                          <div class="pro_price">￥{{ JSON.parse(item.content).product_price }}</div>
                        </div>
                      </div>
                    </div>
                    <div v-if="item.type == 3" :class="item.msg_type == 1 ? 'my_content' : 'you_content'">
                      <div class="product_txtitem">
                        <div><img class="pro_img" v-img-url="JSON.parse(item.content).product_img" /></div>
                        <div>
                          <div class="pro_txtname">{{ JSON.parse(item.content).product_name }}</div>
                          <div class="pro_price">￥共计{{ JSON.parse(item.content).order_num }}件商品：合计￥{{ JSON.parse(item.content).order_price }}</div>
                        </div>
                        <div>
                          <div class="f12 gray6">订单号:{{ JSON.parse(item.content).order_no }}</div>
                          <div class="f12 gray6">创建时间:{{ JSON.parse(item.content).create_time }}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </el-main>
          <div v-if="user_id != 0" class="bg-white">
            <el-upload
              class="avatar-uploader"
              multiple
              ref="upload"
              action="string"
              accept="image/jpeg,image/png,image/jpg"
              :before-upload="onBeforeUploadImage"
              :http-request="UploadImage"
              :show-file-list="false"
              :on-change="fileChange"
            >
              <span class="icon iconfont icon-tupian"></span>
            </el-upload>
            <div><el-input class="chat_input" resize="none" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入内容" v-model="content"></el-input></div>
            <div class="pr btnbox"><button class="send_btn" @click="sendMessage">发消息</button></div>
          </div>
        </el-main>
        <el-aside class="user_info" width="300px">
          <div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="客户信息" name="first">
                <div>
                  <h2 class="mb18">客户信息</h2>
                  <ul>
                    <li>
                      <div class="item_top">客户名称</div>
                      <div v-if="info && info.nickName" class="item_btm">{{ info.nickName }}</div>
                      <div v-else class="item_btm">-</div>
                    </li>
                    <li>
                      <div class="item_top">联系方式</div>
                      <div v-if="info && info.mobile" class="item_btm">{{ info.mobile }}</div>
                      <div v-else class="item_btm">-</div>
                    </li>
                    <li>
                      <div class="item_top">客户地址</div>
                      <div v-if="info && info.city" class="item_btm">{{ info.province }}省{{ info.city }}市</div>
                      <div v-else class="item_btm">-</div>
                    </li>
                    <li>
                      <div class="item_top">客户性别</div>
                      <div v-if="info && (info.gender == 0 || info.gender == 1)" class="item_btm">{{ info.gender ? '男' : '女' }}</div>
                      <div v-else class="item_btm">-</div>
                    </li>
                  </ul>
                </div>
              </el-tab-pane>
              <el-tab-pane label="交易订单" name="second">
                <div class="order_list">
                  <div class="order_item" v-for="(item, index) in order" :key="index">
                    <div class="order_item_top d-b-c mb8">
                      <div class="item_status blue">{{ item.delivery_status.text }}</div>
                      <div>{{ item.create_time }}</div>
                    </div>
                    <div class="mb8">
                      <div class="d-s-s" v-for="(proitem, proindex) in item.product" :key="proindex">
                        <div><img class="order_img" v-img-url="proitem.image.file_path" alt="" /></div>
                        <div>
                          <div>{{ proitem.product_name }}</div>
                          <div v-if="proitem.is_user_grade == 1">￥{{ proitem.grade_product_price }}X{{ proitem.total_num }}</div>
                          <div v-else>￥{{ proitem.product_price }}X{{ proitem.total_num }}</div>
                        </div>
                      </div>
                    </div>
                    <div>
                      <div>订单编号:{{ item.order_no }}</div>
                      <div>付款时间:{{ formatDate(item.pay_time * 1000) }}</div>
                      <div>实收款:￥{{ item.pay_price }}</div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-aside>
      </el-container>

      <!--上传图片-->
    </el-container>
    <Upload v-if="isupload" :isupload="isupload" @returnImgs="returnImgsFunc"></Upload>
    <el-dialog :visible.sync="centerDialogVisible" center>
      <div><img v-img-url="chooseimg" alt="" /></div>
    </el-dialog>
  </div>
</template>

<script>
import ServiceApi from '@/api/service.js';
import SettingApi from '@/api/setting.js';
import FileApi from '@/api/file.js';
import Upload from '@/components/file/Upload';
import ava from '@/assets/img/login-name.png';
import { setCookie, getCookie } from '@/utils/base';
export default {
  data() {
    return {
      avatarUrl: ava,
      loading: false,
      path: '',
      socketTask: '',
      // 确保websocket是打开状态
      is_open_socket: false,
      content: '',
      /*列表数据*/
      tableData: [],
      pageSize: 20,
      /* 联系人页数*/
      curPage: 1,
      /* 聊天记录页数*/
      repage: 1,
      user_id: 0,
      app_id: 0,
      shop_supplier_id: 0,
      my_id: 0,
      conversation: '会话',
      content_list: [],
      /* 聊天滚动条高度*/
      scrollHeight: 0,
      nomore: false,
      isupload: false,
      /*当前图片类别*/
      type: null,
      file_path: '',
      logo_file_path: '',
      user_logo_file_path: '',
      intervalId: null,
      centerDialogVisible: false,
      chooseimg: '',
      info: {},
      activeName: 'second',
      order: [],
      is_destory: false
    };
  },
  components: {
    Upload
  },
  watch: {},
  mounted() {
    // 初始化
    this.init();
    this.getTableList();
    const container = this.$refs.container;
    //这里的定时是为了列表首次渲染后获取scrollHeight并滑动到底部。
    setTimeout(() => {
      this.scrollHeight = container.scrollHeight;
    }, 800);
    container.addEventListener('scroll', e => {
      //这里的2秒钟定时是为了避免滑动频繁，节流
      setTimeout(() => {
        //滑到顶部时触发下次数据加载
        if (e.target.scrollTop == 0 && !this.nomore) {
          //将scrollTop置为10以便下次滑到顶部
          e.target.scrollTop = 10;
          //加载数据
          this.initData();
          //这里的定时是为了在列表渲染之后才使用scrollTo。
          this.$nextTick(() => {
            let scrollH = this.$refs.container.scrollHeight - this.scrollHeight;
            e.target.scrollTo(0, scrollH + 30); //-30是为了露出最新加载的一行数据
          });
        }
      }, 2000);
    });
  },
  destroyed() {
    // 销毁监听
    this.closeSocket();
  },
  methods: {
    init: function() {
      let self = this;
      if (typeof WebSocket === 'undefined') {
        alert('您的浏览器不支持socket');
      } else {
        let _data = getCookie('baseInfo_supplier');
        this.path = JSON.parse(getCookie('userinfo_supplier')).url;
        let json = JSON.parse(_data);
        this.shop_supplier_id = json.user.shop_supplier_id;
        this.app_id = json.user.app_id;
        this.my_id = json.user.supplier_user_id;
        // 实例化socket
        this.socketTask = new WebSocket(this.path + '/socket?user_id=' + json.user.user_id + '&usertype=supplier');
        // 监听socket连接
        this.socketTask.onopen = this.open;
        // 监听socket关闭
        this.socketTask.onclose = this.onclose;
        // 监听socket错误信息
        this.socketTask.onerror = this.error;
      }
    },
    open: function() {
      let self = this;
      console.log('socket连接成功');
      self.is_open_socket = true;
      // 开始发送心跳
      self.startHeart();
      // 注：只有连接正常打开中 ，才能正常收到消息
      self.socketTask.onmessage = this.getMessage;
    },
    startHeart() {
      let self = this;
      let data = JSON.stringify({
        type: 'ping',
        user_id: self.user_id,
        shop_supplier_id: self.shop_supplier_id,
        supplier_user_id: self.my_id,
        msg_type: 1
      });

      self.intervalId = setInterval(function() {
        console.log('发送心跳');
        self.send(data);
      }, 10000);
    },
    /*socket关闭*/
    onclose() {
      let self = this;
      if (self.is_destory) {
        return;
      }

      console.log('已经被关闭了');
      //重连机制
      self.socketTask = null;
      self.is_open_socket = false;
      clearInterval(self.intervalId);
      self.init();
    },
    error: function() {
      console.log('连接错误');
    },
    closeSocket: function() {
      let self = this;
      self.is_destory = true;
      if (self.socketTask == null) {
        return;
      }
      let data = JSON.stringify({
        type: 'close',
        from_id: self.my_id,
        to: self.user_id
      });
      self.send(data);
      self.socketTask.close();
      self.socketTask = null;
      self.is_open_socket = false;
      clearInterval(self.intervalId);
    },
    getMessage: function(msg) {
      let newdata = JSON.parse(msg.data);
      console.log(newdata);
      let date = new Date();
      //绑定用户
      if (newdata.type == 'init') {
        ServiceApi.bindUid(
          {
            client_id: newdata.client_id
          },
          true
        ).then(res => {
          console.log('init---绑定uid');
        });
      }
      if (!newdata.content) {
        return false;
      }
      /* 接收到非状态消息 */
      // 播放声音
      this.relist();
      let audio = new Audio();
      audio.src = './static/imgs/notice.mp3';
      audio.play();
      console.log('播放声音');
      /* 收到当前用户的消息*/
      if (newdata.user_id == this.user_id && newdata.type != 'init' && newdata.type != 'ping') {
        let item = {
          content: newdata.content,
          user_id: newdata.from_id,
          type: newdata.type,
          msg_type: 2,
          create_time: this.formatDate(),
          user: {
            avatarUrl: this.info.avatarUrl
          }
        };
        this.content_list = [...this.content_list, item];
        this.$nextTick(() => {
          this.$refs.container.scrollTop = this.$refs.container.scrollHeight;
        });
      }
      if (this.tableData.length >= 1) {
        let flag = false;
        let n = 0;
        this.tableData.forEach((olditem, index) => {
          if (olditem.user_id == newdata.from_id) {
            flag = true;
            n = index;
          }
        });
        if (flag) {
          if (newdata.type != 'init' && newdata.type != 'ping') {
            this.tableData[n].newMessage.content = newdata.content;
            this.tableData[n].newMessage.type = newdata.type;
            this.tableData[n].newMessage.create_time = this.formatDate();
          }
          this.relist();
        } else {
          if (newdata.from_id && newdata.type != 'init' && newdata.type != 'ping') {
            ServiceApi.getinfo(
              {
                user_id: newdata.from_id
              },
              true
            ).then(res => {
              this.tableData.unshift({
                avatarUrl: res.data.data.userInfo.avatarUrl,
                nickName: res.data.data.userInfo.nickName,
                user_id: res.data.data.userInfo.user_id,
                newMessage: {
                  content: newdata.content,
                  create_time: newdata.time,
                  type: newdata.type
                }
              });
            });
          }
        }
      } else {
        ServiceApi.getinfo(
          {
            user_id: newdata.from_id
          },
          true
        ).then(res => {
          this.tableData.unshift({
            avatarUrl: res.data.data.userInfo.avatarUrl,
            nickName: res.data.data.userInfo.nickName,
            user_id: res.data.data.userInfo.user_id,
            newMessage: {
              content: newdata.content,
              create_time: newdata.time,
              type: newdata.type
            }
          });
        });
      }
      console.log('收到消息');
    },
    newData() {
      let self = this;
      let Params = {};
      Params.user_id = self.user_id;
      Params.page = 1;
      ServiceApi.recordlist(Params, true)
        .then(data => {
          self.loading = false;
          let list = data.data.list.data;
          self.content_list = [...self.content_list, list[0]];
        })
        .catch(error => {});
    },
    send(data) {
      let self = this;
      // 未连接
      if (!self.is_open_socket) {
        return;
      }
      self.socketTask.send(data);
    },
    handleClick() {},
    sendMessage() {
      let self = this;
      if (self.content == '') {
        return false;
      }
      // 未连接
      if (!self.is_open_socket) {
        return;
      }
      let data = JSON.stringify({
        user_id: self.user_id,
        shop_supplier_id: self.shop_supplier_id,
        supplier_user_id: self.my_id,
        msg_type: 1,
        type: 0,
        content: self.content,
        app_id: self.app_id
      });
      let newdata = JSON.parse(data);
      let date = new Date();
      let item = {
        content: newdata.content,
        user_id: newdata.from_id,
        type: newdata.type,
        msg_type: 1,
        supplier: {
          logo: {
            file_path: self.logo_file_path
          }
        },
        create_time: self.formatDate()
      };
      self.content_list = [...self.content_list, item];
      console.log(self.content_list);
      self.socketTask.send(data);
      self.content = '';
      self.$nextTick(() => {
        self.relist();
        self.$refs.container.scrollTop = self.$refs.container.scrollHeight;
      });
    },
    /*获取列表*/
    getTableList() {
      let self = this;
      let Params = {};
      Params.list_rows = 100;
      Params.nickName = '';
      self.loading = true;
      ServiceApi.servicelist(Params, true).then(data => {
        self.loading = false;
        self.tableData = data.data.list.data;
        self.logo_file_path = data.data.model.logo.file_path;
        if (self.tableData.length > 0) {
          self.checked(self.tableData[0]);
        }
      });
    },
    initData() {
      this.repage++;
      this.getRecordlist();
    },
    getRecordlist() {
      let self = this;
      let Params = {};
      Params.user_id = self.user_id;
      Params.page = self.repage;
      ServiceApi.recordlist(Params, true)
        .then(data => {
          self.loading = false;
          let list = data.data.list.data.reverse();
          self.content_list = [...list, ...self.content_list];
          console.log(self.content_list);
          if (data.data.list.last_page <= self.repage) {
            self.nomore = true;
          }
          this.scrollHeight = this.$refs.container.scrollHeight;
          if (self.repage == 1) {
            self.$nextTick(() => {
              self.$refs.container.scrollTop = self.$refs.container.scrollHeight;
            });
          }
        })
        .catch(error => {});
    },
    checked(item) {
      this.user_id = item.user_id;
      this.conversation = item.nickName;
      this.user_logo_file_path = item.avatarUrl;
      this.content_list = [];
      this.info = {};
      this.repage = 1;
      this.nomore = false;
      this.getRecordlist();
      this.getUserinfo();
    },
    DateToHM(string) {
      let myDate = new Date();
      let newsDate = new Date(string);
      if (string) {
        if (myDate.toLocaleDateString() == newsDate.toLocaleDateString()) {
          var f = string.split(' ', 2);
          var t = (f[1] ? f[1] : '').split(':', 3);
          var hm = t[0] + ':' + t[1];
          return hm;
        } else {
          return newsDate.toLocaleDateString();
        }
      } else {
        return '';
      }
    },
    /*选择图片*/
    chooseImg(e) {
      this.type = e;
      this.isupload = true;
    },

    /*关闭选择图片*/
    returnImgsFunc(e) {
      let self = this;
      console.log(e);
      if (e != null && e.file_path != '') {
        self.file_path = e.file_path;
        let data = JSON.stringify({
          user_id: self.user_id,
          shop_supplier_id: self.shop_supplier_id,
          supplier_user_id: self.my_id,
          msg_type: 1,
          type: 1,
          usertype: 'supplier',
          content: self.file_path,
          app_id: self.app_id
        });
        let newdata = JSON.parse(data);
        let date = new Date();
        let item = {
          content: newdata.content,
          user_id: newdata.from_id,
          type: newdata.type,
          msg_type: 1,
          create_time: self.formatDate(),
          supplier: {
            logo: {
              file_path: self.logo_file_path
            }
          }
        };
        this.content_list = [...this.content_list, item];
        self.socketTask.send(data);
        self.$nextTick(() => {
          self.$refs.container.scrollTop = self.$refs.container.scrollHeight;
        });
      }
      self.isupload = false;
    },
    clickImg(path) {
      this.centerDialogVisible = true;
      this.chooseimg = path;
    },
    closeChat(i) {
      this.tableData.splice(i, 1);
    },
    relist() {
      let self = this;
      let Params = {};
      Params.list_rows = 20;
      Params.nickName = '';
      ServiceApi.servicelist(Params, true).then(data => {
        self.tableData = data.data.list.data;
      });
    },
    formatDate(time) {
      let date = new Date();
      if (time) {
        date = new Date(time);
      }
      let year = date.getFullYear(); // 年
      let month = date.getMonth() + 1; // 月
      let day = date.getDate(); // 日
      let week = date.getDay(); // 星期
      let weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      let hour = date.getHours(); // 时
      hour = hour < 10 ? '0' + hour : hour; // 如果只有一位，则前面补零
      let minute = date.getMinutes(); // 分
      minute = minute < 10 ? '0' + minute : minute; // 如果只有一位，则前面补零
      let second = date.getSeconds(); // 秒
      second = second < 10 ? '0' + second : second; // 如果只有一位，则前面补零
      return `${year}/${month}/${day} ${hour}:${minute}`;
    },
    getUserinfo() {
      let self = this;
      ServiceApi.getinfo(
        {
          user_id: this.user_id
        },
        true
      ).then(res => {
        self.info = res.data.data.userInfo;
        self.order = res.data.data.orderList;
      });
    },
    dateConversion(str) {
      let date = '';
      date = new Date(Date.parse(str.replace(/-/g, '/')));
      date = date.getTime();
      return date;
    },
    /*选择上传图片*/
    fileChange(e) {
      console.log(e);
    },

    /*选择图片之前*/
    onBeforeUploadImage(file) {
      const isIMAGE = file.type === 'image/jpeg' || 'image/jpg' || 'image/png';
      const isLt1M = file.size / 1024 / 1024 < 2;
      if (!isIMAGE) {
        this.$message.error('上传文件只能是图片格式!');
      }
      if (!isLt1M) {
        this.$message.error('上传文件大小不能超过 2MB!');
      }
      return isIMAGE && isLt1M;
    },

    /*上传图片*/
    UploadImage(param) {
      let self = this;
      const loading = this.$loading({
        lock: true,
        text: '图片上传中,请等待',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      const formData = new FormData();
      formData.append('iFile', param.file);
      formData.append('group_id', self.activeType);
      FileApi.uploadFile(formData).then(response => {
        loading.close();
        self.returnImgsFunc(response.data);
      });
    }
  }
};
</script>

<style>
.mb8 {
  margin-bottom: 8px;
}

.left {
  background-color: #f0f0f0;
}

.right {
  margin-left: 30px;
  background-color: rgba(242, 242, 242, 0.5);
  box-shadow: 0px 0px 5px rgba(204, 204, 204, 1);
  margin: 5px;
}

.left_item {
  padding: 8px 15px;
  border-bottom: 1px solid #cccccc;
  background: #f0f0f0;
}

.left_item_active {
  padding: 8px 15px;
  border-bottom: 1px solid #cccccc;
  background: #ffffff;
}

.left_item_img {
  width: 40px;
  height: 40px;
}

.left_item_name {
  font-size: 14px;
  margin-left: 10px;
}

.left_item_content {
  color: rgb(153, 153, 153);
  font-size: 12px;
  margin-left: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}

.im_text {
  /* width: 100%; */
  display: flex;
  margin-top: 30px;
  flex-direction: row-reverse;
  position: relative;
}

.im_text2 {
  /* width: 100%; */
  display: flex;
  margin-top: 30px;
  position: relative;
}

.im_text .avatar {
  width: 40px;
  height: 40px;
  margin-left: 5px;
  border-radius: 10px;
  background-color: #000000;
  align-items: flex-start;
}

.im_text2 .avatar {
  width: 40px;
  height: 40px;
  margin-right: 5px;
  border-radius: 10px;
  background-color: #000000;
  align-items: flex-start;
}

.you_content,
.my_content {
  background-color: #ffffff;
  margin-top: 15px;
}

.im_text .my_content {
  max-width: 450px;
  align-items: flex-start;
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
  word-break: break-all;
}

.im_text2 .my_content {
  max-width: 450px;
  align-items: flex-start;
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
  word-break: break-all;
}

.im_text .you_content {
  max-width: 450px;
  align-items: flex-start;
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
  word-break: break-all;
}

.im_text2 .you_content {
  max-width: 450px;
  align-items: flex-start;
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
  word-break: break-all;
}

.infinite-list {
  height: 400px;
  padding: 15px;
}

.el-main {
  padding: 0;
}

.chat_header {
  border-bottom: 1px solid #cacaca;
  margin-bottom: 10px;
  line-height: 60px;
  background-color: #ffffff;
}

.content_title {
  font-size: 16px;
}

.my_content {
  box-shadow: 0px 0px 5px rgba(204, 204, 204, 1);
}

.you_content {
  box-shadow: 0px 0px 5px rgba(204, 204, 204, 1);
}

.pro_img {
  height: 100px;
  width: 100px;
  border-radius: 10px;
  background-color: #ffffff;
}

.pro_txtname {
  max-width: 100px;
  font-size: 14px;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.pro_price {
  font-size: 12px;
  color: #e2231a;
}

.chat_input {
  border: none;
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  line-height: normal;
  color: #000000;
  text-align: left;
  border-width: 0px;
  outline: none;
  margin-bottom: 10px;
  width: 95%;
}

.chat_input textarea {
  outline: none;
  border: none;
}

.send_btn {
  border-width: 0px;
  width: 100px;
  height: 40px;
  background: inherit;
  background-color: rgba(0, 110, 255, 0.898039215686275);
  border: none;
  border-radius: 2px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-weight: 400;
  font-style: normal;
  color: #ffffff;
  line-height: 20px;
  position: absolute;
  outline: none;
  right: 7px;
  top: 5px;
}

.btnbox {
  height: 50px;
  background-color: #ffffff;
}

.bg-white {
  background-color: #ffffff;
}

.cont_img {
  width: 100px;
  height: 100px;
  border-radius: 10px;
}

.chat_bg {
  background: rgba(242, 242, 242, 0.5);
  margin: -16px;
  height: calc(100vh - 90px);
}

.el_aside {
  box-shadow: 0px 0px 5px rgba(204, 204, 204, 1);
  margin: 5px;
}

.icon-tupian:hover {
  color: #1296db;
}

.notable {
  text-align: center;
  background: #ffffff;
  padding: 30px;
  font-size: 17px;
}

.my_date {
  color: #cccccc;
  font-size: 12px;
  position: absolute;
  top: -10px;
}

.im_text .my_date {
  right: 45px;
}

.user_info {
  box-shadow: 0px 0px 5px rgba(204, 204, 204, 1);
  margin: 5px;
  background-color: #ffffff;
  padding: 30px;
  max-height: calc(100vh - 128px);
}

.item_top {
  color: #cccccc;
  margin-bottom: 8px;
}

.item_btm {
  font-size: 13px;
  color: #333333;
  margin-bottom: 18px;
}

.order_img {
  width: 50px;
  height: 50px;
}

.order_item_top {
  background-color: #f3f3f3;
  padding: 5px 16px;
  border-radius: 6px;
  margin-top: 18px;
}

.danger_tip {
  position: absolute;
  top: 50px;
  left: 0;
  width: 100%;
  text-align: center;
}

.avatar-uploader .icon-tupian.icon.iconfont {
  font-size: 22px;
  margin-left: 10px;
}

.left .icon-shanchu.icon.iconfont {
  cursor: pointer;
  color: #999999;
  font-size: 14px;
  margin-left: 5px;
}
</style>
